@using System.Globalization

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <RadzenCard class="w-100 mb-4" >
                <RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox>
                <RadzenLabel Text="Show Data Labels" For="dataLabels" Style="margin-left: 8px; vertical-align: middle;" />
            </RadzenCard>
            <h4>Auto-size stacked bar series</h4>
            <RadzenChart SeriesClick=@OnSeriesClick style="height: 400px">
                <RadzenStackedBarSeries Data="@revenue2020" CategoryProperty="Quarter" Title="2020" LineType="LineType.Dashed" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenStackedBarSeries>
                <RadzenStackedBarSeries Data="@revenue2019" CategoryProperty="Quarter" Title="2019" ValueProperty="Revenue">
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </RadzenStackedBarSeries>
                <RadzenValueAxis Formatter="@FormatAsUSD" Min="0" Max="800000" Step="100000">
                    <RadzenGridLines Visible="true" />
                    <RadzenAxisTitle Text="Revenue in USD" />
                </RadzenValueAxis>
                <RadzenBarOptions Radius="5" />
            </RadzenChart>
            <h4>Custom size stacked bar series</h4>
            <RadzenChart SeriesClick=@OnSeriesClick style="height: 400px">
                <RadzenStackedBarSeries Data="@revenue2020" CategoryProperty="Quarter" Title="2020" LineType="LineType.Dashed" ValueProperty="Revenue" />
                <RadzenStackedBarSeries Data="@revenue2019" CategoryProperty="Quarter" Title="2019" ValueProperty="Revenue" />
                <RadzenValueAxis Formatter="@FormatAsUSD" Min="0" Max="800000" Step="100000">
                    <RadzenGridLines Visible="true" />
                    <RadzenAxisTitle Text="Revenue in USD" />
                </RadzenValueAxis>
                <RadzenBarOptions Radius="5" Height="20" />
            </RadzenChart>
        </div>
    </div>
</div>

<EventConsole @ref=@console />

@code {
    EventConsole console;
    bool showDataLabels;

    void OnSeriesClick(SeriesClickEventArgs args)
    {
        console.Log(args);
    }

    class DataItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }

    string FormatAsUSD(object value)
    {
        double num = (double)value / 1000;

        return num.ToString("$0K");
    }

    DataItem[] revenue2019 = new DataItem[]
    {
    new DataItem
    {
        Quarter = "Q1",
        Revenue = 234000
    },
    new DataItem
    {
        Quarter = "Q2",
        Revenue = 284000
    },
    new DataItem
    {
        Quarter = "Q3",
        Revenue = 274000
    },
    new DataItem
    {
        Quarter = "Q4",
        Revenue = 294000
    },
    };

    DataItem[] revenue2020 = new DataItem[] {
    new DataItem
    {
    Quarter = "Q1",
    Revenue = 254000
    },
    new DataItem
    {
    Quarter = "Q2",
    Revenue = 324000
    },
    new DataItem
    {
    Quarter = "Q3",
    Revenue = 354000
    },
    new DataItem
    {
    Quarter = "Q4",
    Revenue = 394000
    },

    };
}